<template>
  <div>
    <!-- 使用 v-html 动态插入加载的 HTML 内容 -->
    <div v-html="luckysheetHtml"></div>
  </div>
</template>

<script>
export default {
  name: 'LuckysheetHtml',
  data() {
    return {
      luckysheetHtml: '',  // 存储加载的 HTML 内容
    };
  },
  mounted() {
    this.loadHtmlFile();
  },
  methods: {
    loadHtmlFile() {
      // 假设你有一个本地 HTML 文件 (如 luckysheet.html)，你可以用 fetch 请求加载该文件
      fetch('./luckysheet/index.html')
        .then(response => response.text())  // 读取文件内容
        .then(html => {
          this.luckysheetHtml = html;  // 将 HTML 内容存储到 data 中
          this.$nextTick(() => {
            // 如果需要在加载后初始化 Luckysheet，执行初始化操作
            this.initLuckysheet();
          });
        })
        .catch(error => console.error('Error loading HTML file:', error));
    },
    initLuckysheet() {
      // 在 Vue 组件加载完 HTML 后，通过 Luckysheet 初始化表格
      if (window.luckysheet) {
        luckysheet.init({
          container: document.querySelector('#luckysheet'),  // 设置 Luckysheet 容器
          lang: 'zh',  // 设置语言
          showToolbar: true,
          showInfobar: true,
          allowEdit: true,
          columnHeader: true,
          rowHeader: true,
        });
      }
    }
  }
};
</script>

<style scoped>
#luckysheet {
  height: 600px;  /* 设置 Luckysheet 容器的高度 */
}
</style>
